<template>
    <div class="page">
        <n-form :model="model">
            <n-form-item label="web">
                <n-input v-model:value="model.web" @keydown.enter.prevent />
            </n-form-item>
            <n-form-item label="js">
                <n-input v-model:value="model.js" type="textarea" @keydown.enter.prevent />
            </n-form-item>
            <n-form-item label="css">
                <n-input v-model:value="model.css" type="textarea" @keydown.enter.prevent />
            </n-form-item>

            <n-space>
                <n-button @click="onAdd">新增</n-button>
                <n-button type="tertiary" @click="onEdit">修改</n-button>
            </n-space>
        </n-form>

        <h4 @click="onLoad">全部</h4>
        <n-space>
            <n-tag closable @close="onDel(i)" v-for="i in list" :key="i._id" @click="onShow(i)">{{ i.web }}</n-tag>
        </n-space>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { NForm, NTreeSelect, NInput, NButton, NFormItem, NSpace, NTag, useMessage } from "naive-ui";
import { useScriptStore } from "@/stores/script";
const scriptStore = useScriptStore();
interface ModelType {
    web: string;
    js: string;
    css: string;
}

const model = ref<ModelType>({
    web: "",
    js: "",
    css: ""
});

const list = computed(() => scriptStore.list);

onMounted(() => {
    onLoad();
});

const onAdd = async () => {
    let param = {
        ...model.value
    };
    let res = await scriptStore.add(param);
    console.log(res);
    onLoad();
};

const onEdit = async () => {
    let param = {
        ...model.value
    };
    let res = await scriptStore.update(param);
    console.log(res);
    onLoad();
};

const onDel = async (item: any) => {
    console.log(item);
    let res = await scriptStore.remove(item._id);
    console.log(res);
    onLoad();
};

const onShow = (item: any) => {
    model.value.web = item.web;
    model.value.js = item.js;
    model.value.css = item.css;
    model.value._id = item._id;
};

const onLoad = () => {
    scriptStore.load();
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
